<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${session.user.getName() + '的主页'}"></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script th:src="@{/js/jquery-3.2.1.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <style>
        body {
            background-color: rgb(240, 242, 245);
        }
    </style>
</head>
<body>
<div th:replace="components/readerPublicComponents::topbar"></div>
<div th:replace="components/adminPublicComponents::message"></div>
<div style="width: 60%;margin-left: 20%;margin-top: 10%">
    <form class="form-horizontal" method="post" th:action="@{/reader_repasswd_do}" id="repasswd">
        <div class="form-group">
            <label for="oldPasswd" class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <span id="info"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="oldPasswd" class="col-sm-2 control-label">旧密码</label>
            <div class="col-sm-10">
                <input class="form-control" type="password" id="oldPasswd" name="oldPasswd" placeholder="输入旧密码"
                       onblur="myCheckOldPssword()">
            </div>
        </div>
        <div class="form-group">
            <label for="newPasswd" class="col-sm-2 control-label">新密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="newPasswd" name="newPasswd" placeholder="输入新密码">
            </div>
        </div>
        <div class="form-group">
            <label for="reNewPasswd" class="col-sm-2 control-label">确认新密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="reNewPasswd" name="reNewPasswd" placeholder="再次输入新密码">
            </div>
        </div>
        <p id="tishi" style="margin-left: 10%;position: absolute"></p><br/>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="提交" class="btn btn-default">
            </div>
        </div>
    </form>


</div>
<script th:inline="javascript">
    function mySubmit(flag) {
        return flag;
    }

    $(document).keyup(function () {
        if ($("#newPasswd").val() != $("#reNewPasswd").val() && $("#newPasswd").val() != "" && $("#reNewPasswd").val() != "" && $("#newPasswd").val().length == $("#reNewPasswd").val().length) {
            $("#tishi").text("提示:两次输入的新密码不同，请检查!");
        } else {
            $("#tishi").text("");
        }
    })

    $("#repasswd").submit(function () {
        if ($("#oldPasswd").val() == '' || $("#newPasswd").val() == '' || $("#reNewPasswd").val() == '') {
            $("#tishi").text("提示:请填写完整!");
            return mySubmit(false);
        } else if ($("#newPasswd").val() != $("#reNewPasswd").val()) {
            $("#tishi").text("提示:两次输入的新密码不同，请检查!");
            return mySubmit(false);
        }
    })

    function myCheckOldPssword() {
        $.post({
            url: "/checkPassword",
            data: {"oldPasswd": $("#oldPasswd").val()},
            success: function (data) {
                if (data.isLike === "true") { //与旧密码相同
                    $("#info").css("color", "green")
                } else {
                    $("#info").css("color", "red")
                }
                $("#info").html(data.msg)
            }
        })
    }
</script>


</body>
</html>
